<template>
    <view>
        <view class="top">
            — 开启城市深度游玩攻略 —
        </view>
        <view class="city-item" @click="navto(city.id)" v-for="(city, index) in citys" :key=index>
            <view class="img">
                <image :src="city.image" mode="aspectFit"></image>
            </view>
            <view class="title">{{city.title}}</view>
            <view class="desc">{{city.desc}}</view>
        </view>
    </view>
    
</template>

<script>
    export default {
        props:{
            citys:{
                type:Array
            }
        },
        methods:{
            navto(id){
                uni.navigateTo({
                    url: "/pages/cityDetail/CityDetail"
                });
            }
        }
    }
</script>

<style>
    .top{
        margin-top: 30px;
        margin-bottom: 20px;
        font-size: 16px;
        text-align: center;
    }
    .city-item{
        width: 50%;
        float: left;
        margin: 10px 0;
    }
    .title{
        text-align: center;
        font-size: 14px;
        margin: .3125rem;
    }
    .desc{
        text-align: center;
        font-size: 12px;
        margin: .3125px;
        color: #ccc3c6;
    }
    image{
        width: 100%;
        height: 4.7rem;
    }
</style>
